﻿
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>监控中心の考勤系统</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0" />
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="0">
<link rel="stylesheet" href="/css/matrix-media.css" />
<style>


td:hover
{
	box-shadow: 0px 0px 15px #000;
	background-color:rgb(237, 230, 92);
}
#tab_month tr td{
		text-align:center;
		}
</style>

<link rel="stylesheet" type="text/css" href="/css/footer.css" />
<link rel="stylesheet" href="/css/tab.css"/>
<script language="javascript" type="text/javascript" src="/js/preview/WdatePicker.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/js.cookie.js"></script>
<script src="/js/csrf.token.js"></script>

<script type="text/javascript">
$(function(){
	getData();
	
});


var now ; //当前日期 
var nowDayOfWeek; //今天本周的第几天 
var nowDay ; //当前日 
var nowMonth ; //当前月 
var nowYear ; //当前年 

function initdate(selectdate){
	if(selectdate!=null&&selectdate!=""){
		selectdate+="-01";
		selectdate=selectdate.replace(/-/gm,'/');
		now=new Date(Date.parse(selectdate));	
	}else{
		now=new Date();	
	}
	nowDayOfWeek = now.getDay(); //今天本周的第几天 
	nowDay = now.getDate(); //当前日 
	nowMonth = now.getMonth(); //当前月 
	nowYear = now.getYear(); //当前年 
	nowYear += (nowYear < 2000) ? 1900 : 0; // 
}

function formatDate(date) { 
	var myyear = date.getFullYear(); 
	var mymonth = date.getMonth()+1; 
	var myweekday = date.getDate(); 

	if(mymonth < 10){ 
	mymonth = "0" + mymonth; 
	} 
	if(myweekday < 10){ 
	myweekday = "0" + myweekday; 
	} 
	return (myyear+"-"+mymonth + "-" + myweekday); 
} 

/***
    * 获得本月的时间
    */
function getCurrentMonth(selectdate) {
	initdate(selectdate);
	var monthdays=[];
	var monthStartDate = new Date(nowYear, nowMonth, 1); //本月第一天
	var nextmonthStartDate = new Date(nowYear, nowMonth + 1, 1); //下月第一天
	var days = (nextmonthStartDate - monthStartDate)/(1000 * 60 * 60 * 24); //本月天数
	var day=monthStartDate;
	for(var i=0;i<days;i++){	
		monthdays.push(formatDate(day));
		day= new Date(Date.parse(day) + (86400000));
	}
	return monthdays;
};

function getData(){
	$("#tab_tbody").empty(); 
	var selectdate=$("#selectdate").val();	
	var monthdays=getCurrentMonth(selectdate);	
	$("#montitle").val(now.getFullYear()+"-"+(now.getMonth()+1)+" 监控中心工作考勤表");
	var startd=monthdays[0];
	var endd=monthdays[monthdays.length-1];	     	
	 $.ajax( {  
     url:'/preview_data/scheduling_dataList',// 跳转到 action  
     data:{  
             startd:startd,
             endd:endd
	 },  
     type:'POST',  
     cache:false,  
     dataType:'json',  
     success:function(data) {  	
     	var tab_tbody=$("#tab_tbody");
     	var topTr=$("<tr></tr>");
     	var nameTD=$("<td style=\"text-align:center;color:white;background-color:rgb(111, 0, 0);\"></td>").html("NAME_"+monthdays[0].substring(0,4));
     	topTr.append(nameTD);
     	for(var i=0;i<monthdays.length;i++){
     		var td=$("<td style=\"text-align:center;color:white;background-color:rgb(0, 0, 0);\"></td>").html(monthdays[i].substring(5));
     		topTr.append(td);
     	}
     	tab_tbody.append(topTr);
     	var names=data.names;
     	for(var i=0;i<names.length;i++){
     		var trs=$("<tr></tr>");
     		var name_=$("<td></td>").html(names[i].name);
     		trs.append(name_);
     		for(var e=0;e<monthdays.length;e++){
     			var datetd=$("<td></td>").attr("id",names[i].name+"_"+monthdays[e]).css("background","rgb(237, 230, 92)").html("空");
     			trs.append(datetd);
     		}
     		tab_tbody.append(trs);
     	}
     	var rows=data.rows;
     	for(var i=0;i<rows.length;i++){
			var cont=rows[i].cab;
			if(rows[i].cab=='A'||rows[i].cab=='Z'){
				cont="";
				$("#"+rows[i].name+"_"+rows[i].date).css("background","rgb(255,255,255)").html(cont);
				
			}else if(rows[i].cab=='B'){
				$("#"+rows[i].name+"_"+rows[i].date).css("background","rgb(255,255,255)").css("color","rgb(0, 0, 128)").html(cont);
					
			}else if(rows[i].cab=='C'){
				$("#"+rows[i].name+"_"+rows[i].date).css("background","rgb(255,255,255)").css("color","rgb(0, 128, 0)").html(cont);
				
			}else if(rows[i].cab=='O'){
				$("#"+rows[i].name+"_"+rows[i].date).css("background","rgb(255,255,255)").css("color","rgb(255, 0, 255)").html(cont);
				
			}else if(rows[i].cab=='Z'){
				$("#"+rows[i].name+"_"+rows[i].date).css("background","rgb(255,255,255)").css("color","rgb(118, 118, 118)").html(cont);
			}else {
				$("#"+rows[i].name+"_"+rows[i].date).css("background","rgb(255, 0, 255)").html(cont);
			}
     	}
      },  
      error:function(){     
           alert("异常！");  
      }  
 });

}


</script>
</head>

<body>

<div style="width:90%;margin:0 auto" align=center>
<div style="margin:10% auto" align=center>

<form method="post">


<input id="montitle" type="button" value="2015-12 监控中心工作考勤表" title="说明：
1、实际出勤是指本月实际上班天数（不含带薪假），如：当月22天工作日，事假1天，年假1天，则实际出勤20天
2、事假、病假为小时计时，除以8折合成天数计算，保留两位小数，如：2天写“2”、5小时写“0.63”
3、迟到、早退为分钟计时，折合成天数计算
4、带薪假备注：年假、婚假、调休假、丧假、产假、孕检假、陪产假等			
5、加班：“1.5”代表工作日加班，计1.5倍工资；“2”代表休息日加班，计2倍工资；“3”代表法定假日加班，计3倍工资
6、C班用绿色字体“C”;B班用深蓝色字体“B”; A/Z班遵循正常工作日空白，无须显示;休息日为O(大写字母“欧”)，用粉红色字体“O”" />
<input id="selectdate" name="date" type="datetime" onClick
="WdatePicker({skin:'blueFresh',orderdate_end:'%Y-%m',dateFmt:'yyyy-MM',alwaysUseStartDate:true})" placeholder="选择日期" />
<input name="submit" type="button" value="提交查询"  onclick="getData();"/>

</form>

<hr />
<br>
<br>
<br>

<table id="tab_month" name="tab" style="background-color:rgb(237, 230, 92);">
<tbody id="tab_tbody" >
</tbody>
</table>
</div>

<div style="margin:0 0 0 0">
<footer class="v-footer-bright"> Powered by <a href="http://mx110.qiniudn.com/">V</a> Copyright © 2014-2015 007ka-<a href="/">监控中心</a> All rights reserved. </footer>
</div>
</div>

</body>
</html>